import React, { Component, Suspense } from 'react'
import { Route, Link } from 'react-router-dom'
console.log('home组件加载了')
export default class Home extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <Link to="/home/news">News</Link>
            </li>
            <li>
              <Link to="/home/message">Message</Link>
            </li>
          </ul>
          <div>
            <div>
              {/* <News></News>
              <Message></Message> */}
              {/* <Route path="/home/news" component={News}></Route>
              <Route path="/home/message" component={Message}></Route> */}
              <Suspense
                fallback={
                  <div style={{ color: 'red', fontSize: 50 }}>正在加载...</div>
                }
              >
                {this.props.childs.map((item) => {
                  return (
                    <Route
                      key={item.path}
                      path={item.path}
                      // component={item.component}
                      render={(props) => {
                        return (
                          <item.component
                            {...props}
                            childs={item.children}
                          ></item.component>
                        )
                      }}
                    ></Route>
                  )
                })}
              </Suspense>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
